<template>
    <div>
        <div class="jc">
            <span>
                <h2 >类型管理</h2>
            </span>
            <span class="btn">
                <el-button @click="goAdd()" style="margin:auto" size="medium" type="primary">
                    添加
                </el-button>
            </span>
        </div>
        <div class="flex" >
            <div style="width:99%;margin:0 5px">
                <el-table :data="types" :tree-props="{children:'children'}"  row-key="id"  border  style="width:100%;margin:0 auto">
                    <el-table-column prop="type" label="类型" min-width="30%">
                    </el-table-column>
                    <el-table-column prop="id" label="ID" min-width="10%">
                    </el-table-column>
                    <el-table-column prop="prio" label="优先级" min-width="10%">
                    </el-table-column>
                    <el-table-column label="添加子节点" min-width="10%">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.pid==0" 
                                @click="addChild(scope.row);bshow=true" 
                                type="primary" size="small" icon="el-icon-plus">
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="10%">
                        <template slot-scope="scope">
                            <el-button @click="goUpdate(scope.row)" 
                                        type="warning" icon="el-icon-edit" size="mini">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog title="类型信息" :visible.sync="bshow" width="30%">
            <el-form :model="subType" ref="subType" label-width="80px" label-position="left">
                <el-form-item prop="id" label="PID">
                    <el-input readonly="readonly"  v-model="subType.pid"></el-input>
                </el-form-item>
                <el-form-item label="父类型">
                    <el-input readonly="readonly" v-model="subType.node"></el-input>
                </el-form-item>
                <hr>
                <el-form-item prop="id" label="本ID">
                    <el-input readonly="readonly" v-model="subType.id"></el-input>
                </el-form-item>
                <el-form-item label="本类型" :rules="[{required: true,message: '请输入书本类型',trigger:'blur'}]">
                    <el-input v-model="subType.type" ></el-input>
                </el-form-item>
                <el-form-item prop="prio" label="优先级">
                    <el-input v-model="subType.prio"></el-input>
                </el-form-item>
                <el-button @click="submit('subType')">{{title}}</el-button>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name:'',
        props:[],
        data() {
            return {
                bshow:false,//显示或者消失对话框
                types: [],//所有类型
                title:'',//提交的标题
                subType:{id:0,type:"",pid:0,prio:100,isdel:0,node:'新一层节点'} //添加修改输入框
            }
        },
        methods: {
            goAdd(){
                this.subType = {id:0,type:"",pid:0,prio:100,isdel:0,node:"新一层节点"}
                this.title = '添加'
                this.bshow = true;
            },
            addChild(item){
                this.subType = {id:0,type:"",pid:item.id,prio:100,isdel:0,node:item.type}
                this.title = '添加子节点'
            },
            goUpdate(item) {
                this.subType.node = "一层节点"
                this.title = '修改'
                console.log(this.subType);
                this.subType= {...item};
                this.bshow = true;
                if(item.pid!=0){
                    for (const key in this.types) {
                        if(this.types[key].id == item.pid){
                            this.node = this.types[key].type
                            return;
                        }
                    }
                    
                }
            },
            submit(formName){
                var subType = this.subType;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.$postX("/api/adm/type/add",subType).then(
                            function(resp){
                                _this.types = []
                                var types = resp.data.data;
                                for (const i in types) {
                                    if(types[i].pid == 0){
                                        types[i].children = []
                                        _this.types.push(types[i])
                                        for (const j in types) {
                                            if(types[i].id==types[j].pid){
                                                _this.types[i].children.push(types[j])
                                            }
                                        }
                                    }
                                }
                            }
                        )
                    }else{
                        this.$message.error('类型名称不能为空');
                    }
                })
                this.bshow = false;
            }
        },
        mounted() {
            window._this = this;
            this.$get("/api/adm/type/findAll2").then(
                function(resp) {
                    var types = resp.data.data;
                    for (const i in types) {
                        if(types[i].pid == 0){
                            types[i].children = []
                            for (const j in types) {
                                if(types[i].id==types[j].pid){
                                    types[i].children.push(types[j])
                                }
                            }
                            _this.types.push(types[i])
                        }
                    }
                }
            );
        },
    }
</script>
<style scoped="scoped">
    .flex{
        margin: 5px;
        width: 100%;
        justify-content: space-between;
    } 
    .jc{
        display: flex;
        margin: 0 5px;
        justify-content:space-between;
        border-bottom: 2px solid gray;
    }
    .btn{
        display: flex;
        justify-content: center;
        align-content:center;
    }
    .sub{
        margin-right:5px; 
    }
    .type{
        border-top: 2px solid gray;
        line-height: 45px;
    }
    form{
        margin-left: 10px;
    }
</style>
